<template>
  <view class="registdetil__content" :style="dynamicStyles">
    
  	<view class="registdetil__content__confirm" v-if="type=='1'">
  		<view class="registdetil__content__title" >
  			<text :style="'border-left:'+'6rpx solid '+main_color">{{title}}</text>
  		</view>
  		<view class="registdetil__content__confirm--content">
  			<slot></slot>
  		</view>
  	</view>
  	
  	<view class="registdetil__content__box" v-if="type=='2'">
  		<view class="registdetil__content__title">
  			<text>{{title}}</text>
  		</view>
  		<view class="registdetil__content__box--content">
  			<slot></slot>
  		</view>
  	</view>
  </view>
</template>

<script>
export default {
  name:'detail-pages',
	data() {
		return {
      dynamicStyles:{
        border:this.border?'1px solid #e0e5e0':''
      }
		};
	},
	props: {
		type:{
		  type: String,
		  default: '1'
		},
		title: {
			type: String,
			default: ''
		},
		main_color: {
			type: String,
			default: ''
		},
		border: {
			type: Boolean,
			default: false
		}
	}
};
</script>

<style lang="scss" scoped>
  .registdetil {
  	&__content {
      width:100%;
  		margin: 12rpx 0;
  		border-radius: 8rpx;
  		background-color: #fff;
		box-shadow: 4px 4px 15px rgba(14, 66, 210, 0.1);
  		padding-bottom: 20rpx;
  		&__box{
  			padding: 0 32rpx;
  			&--content{
  				::v-deep view{
  					height: 100rpx;
  					font-size: 24rpx;
  					border-bottom: 1rpx solid #e0e5e0;
  					display: flex;
  					align-items: center;
  					>text:first-child{
  						width: 130rpx;
  						min-width: 130rpx;
  						display: inline-block;
  					}
  				}
  			}
  		}
  		&__confirm{
  			padding: 0 32rpx;
  			&--content{
  				padding: 40rpx 12rpx 0 12rpx;
  				::v-deep view{
  					margin-bottom: 20rpx;
  					font-size: 24rpx;
  					>text:first-child{
  						width: 130rpx;
  						min-width: 130rpx;
  						display: inline-block;
  					}
  				}
  			}
  		}
  		&__title{
  			padding:32rpx 12rpx;
  			border-bottom: 1rpx solid #e0e5e0;
  			>text{
  				border-left: 6rpx solid #0096e4;
  				padding-left: 16rpx;
  				font-size: 32rpx;
  			}
  		}
  	}
  }
</style>